<template lang="html">
  <section class="s-wrapper">
    <div class="btn-box">
      <ul class="btn-list swiper-pagination">
        <!-- <li
          class="btn-item"
          :class="{'active': $index === current}"
          v-for="item, $index in list"
          :key="$index"
        >{{$index + 1}}</li> -->
      </ul>
    </div>
    <div class="box">
      <img src="http://120.25.144.98:8086/images/1.jpg" alt="">
    </div>
    <div class="page-box swiper-container">
      <ul class="page-list swiper-wrapper">
        <li
          class="page-item swiper-slide"
          :class="{'active': current === $index}"
          v-for="item, $index in list"
          :key="$index"
          ref="page">
          <p>{{item.title}}</p>
          <img :src="item.src" alt="">
        </li>
      </ul>
    </div>
    <ul></ul>
  </section>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      list: []
    }
  },
  methods: {
    getList() {
      let url = "/static/images/";
      // let url = "http://120.25.144.98:8086/images/";
      this.list = [
        {id: 1, title: '问题3', src: url+'3.jpg'},
        {id: 2, title: '问题2', src: url+'2.jpg'},
        {id: 3, title: '问题4', src: url+'4.jpg'},
        {id: 4, title: '问题5', src: url+'5.jpg'},
      ];
      this.$nextTick(()=> {
        setTimeout(()=> {
          this.setSwiper();
        }, 1000);
      });
    },
    changePage(target) {
      this.list.map((item, index) => {
        if(item.id === target.id) {
          this.current = index;
        }
      });
    },
    setSwiper() {
      var swiper = new Swiper('.swiper-container', {
          pagination: '.swiper-pagination',
          paginationClickable: true,
          paginationBulletRender: function (swiper, index, className) {
              return '<li class="' + className + ' btn-item' + '">' + (index + 1) + '</li>';
          }
      });
    }
  },
  mounted() {
    this.getList();
  }
}
</script>

<style lang="scss">
@import "../../assets/scss/default.scss";
.s-wrapper {
  width: px2rem(750);
  .box {
    width: 100%;
    overflow: hidden;
    img {
      width: px2rem(750);
    }
  }
  .btn-box {
    width: 100%;
    height: px2rem(90);
    position: relative;
    .btn-list {
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
      .btn-item {
        width: px2rem(50);
        height: px2rem(50);
        line-height: px2rem(50);
        font-size: px2rem(36);
        text-align: center;
        color: $white;
        margin-right: px2rem(20);
        &:last-child {
          margin-right: 0;
        }
        &.swiper-pagination-bullet-active {
          color: $default;
        }
      }
    }
  }
  .page-box {
    width: 100%;
    .page-list {
      width: 100%;
      .page-item {
        width: 100%;
        p {
          font-size: px2rem(36);
          line-height: px2rem(50);
        }
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
